<template>
  <div>
    <div>
      <el-col :span="24" class="mb-10">
        <el-input v-model="editForm.name" placeholder="填写申请老师" @keyup.enter.native="searchBtn" size="small"
                  class="w-200 mr-10"></el-input>
        <el-button type="primary" size="small" @click="searchBtn"><i class="el-icon-search"></i>搜索</el-button>
        <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
      </el-col>
      <el-col :span="24" class="mb-10">
        <el-radio-group v-model="editForm.is_examine" @change="tabList" size="small">
          <el-radio-button :label="0">申请中({{ number[0] }})</el-radio-button>
          <el-radio-button :label="1">申请完成</el-radio-button>
          <el-radio-button :label="2">已驳回</el-radio-button>
        </el-radio-group>
      </el-col>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body-box">
      <el-table
        ref="multipleTable"
        :data="arryList"
        :stripe="tableStyle.tableStripe"
        :border="tableStyle.tableBorder"
        tooltip-effect="dark"
        style="width: 100%"
        header-cell-class-name="table-text-c"
        cell-class-name="table-text-c">
        <el-table-column
          prop="create_time"
          label="申请时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="examine_time"
          label="领取时间"
          key="1"
          align="center"
          v-if="editForm.is_examine==1">
        </el-table-column>
        <el-table-column
          label="申请班级"
          align="center"
          key="2">
          <template slot-scope="scope">
            {{ scope.row.classes ? scope.row.classes.class_name : '无记录' }}
          </template>
        </el-table-column>
        <el-table-column
          label="申请老师"
          align="center"
          key="3">
          <template slot-scope="scope">
            {{ scope.row.user.realname }}
          </template>
        </el-table-column>
        <el-table-column
          label="申请教具"
          align="center"
          key="4">
          <template slot-scope="scope">
            {{ scope.row.tools ? scope.row.tools.name : '未知' }}
          </template>
        </el-table-column>
        <el-table-column
          label="缩略图"
          align="center">
          <template slot-scope="scope">
            <ImagePreview :src="scope.row.tools.pic" width="40px" height="40px"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column
          label="申请数量"
          align="center"
          key="5">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          width="120"
          key="6">
          <template slot-scope="scope">
            <span
              :class="editForm.is_examine==0?'c-danger':'c-success'">{{ editForm.is_examine == 0 ? '待确认' : editForm.is_examine == 1 ? '确认领取' : '已驳回' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="190" v-if="editForm.is_examine==0" key="7" align="center">
          <template slot-scope="scope">
            <el-button size="small" @click="backApply(scope.row.id)" v-if="editForm.is_examine==0">
              驳回
            </el-button>
            <el-button size="small" type="primary" @click="lingyongList(scope.row)" v-if="editForm.is_examine==0">
              分配管理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="page.total"
        :page-size="page.pagesize"
        @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <viewImgDialog :privaImgObj="imgsrcCheck" :visible.sync="dialogImgVisible"></viewImgDialog>
    <getlistDetail :visible.sync="detailVisible" :detailId="detailId" :pageType="pageType" @InitFn="InitFn"></getlistDetail>

  </div>
</template>

<script>
import api from '@/utils/api.js'
import {pagination, tableoption} from '@/utils/util.js'
import viewImgDialog from '@/components/dialog/previewImgDialog.vue'
import getlistDetail from "../getlistDetail";

export default {
  components: {
    viewImgDialog,
    getlistDetail
  },
  data() {
    return {
      tableStyle: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [],
      number: [0, 0],
      editForm: {
        name: '', // 名称
        p: '',
        is_examine: 0
      }, // 编辑界面数据
      // 预览
      imgsrcCheck: '',
      dialogImgVisible: false,
      detailVisible: false,
      detailId: 0,
      pageType: ''
    }
  },
  watch: {
    $route(to, from) {
      console.log('导航路由变化了借阅分配:', to, from)
      if (from.path === '/getlistDetail') {
        this.InitFn()
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      let url_ = api.tools_apply_index
      if (this.status == 1) {
        url_ = api.tools_apply_disList
      }
      this.editForm.p = this.page.pageindex
      if (this.status === 1) {
        this.editForm.status = this.leadingstatus
      }
      this.$fetch(url_, this.editForm).then((response) => {
        if (response.code === 0) {
          if (this.editForm.is_examine == 1) {
            this.$set(this.number, 1, response.list.total)
          } else {
            this.$set(this.number, 0, response.list.total)
            this.$set(this.number, 1, response.distribute_number)
          }
          for (let i in response.list.data) {
            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    tabList() {
      this.arryList = []
      this.page.pageindex = 1
      this.editForm.name = ''
      this.InitFn()
    },
    // 显示领用列表
    lingyongList(row) {
      // console.log('数据长度：', JSON.stringify(row))
      // this.$router.push('/getlistDetail?id=' + row.id + '&type=apply')
      this.pageType = 'apply'
      this.detailId = row.id
      this.detailVisible = true
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.editForm.name = ''
      this.InitFn()
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    viewImgDShow(path) {
      this.imgsrcCheck = path
      this.dialogImgVisible = true
    },
    // 驳回请求
    backApply(id) {
      this.$confirm('确认驳回此申请？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.backApplyFn(id)
      }).catch(() => {
      })
    },
    backApplyFn(id) {
      this.$post(this.api.tearch.reject, {id: id}).then((response) => {
        if (response.code === 0) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted() {
    console.log('导航路由变化了借阅分配mounted')
  },
  // 缓存机制 star
  beforeRouteEnter(to, from, next) {
    // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
    // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
    if (to.meta.isNeedRefresh) {
      this.InitFn() // 详情页面需要刷新数据
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // isNeedRefresh 进入页面判断是否需要刷新
    if (to.meta.isNeedRefresh) {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  }
  // 缓存机制 end
}
</script>


